<template>
	<view class="content">
		<!-- 自定义顶部导航 -->
		<uni-nav-bar class="uni-nav-bar" :title="scrollTop > 0? '商品详情': ''" :fixed="true" :backgroundColor="scrollTop > 0? '#FFFFFF': ''">
			<view slot="left" class="left">
				<view class="left-back unify-flex" :style="{'border-color': scrollTop > 0? '#FFFFFF': ''}" @tap="tapBack">
					<view class="iconfont el-icon-icon12 unify-rotate270"></view>
				</view>
			</view>
		</uni-nav-bar>

		<!-- 轮播图 -->
		<uni-slideshow-exhibition height="650rpx" :list="objectification && objectification.goods_image"></uni-slideshow-exhibition>

		<!-- 商品信息 -->
		<view class="goods-info unify-background-color unify-padding">

			<view class="goods-info-title unify-flex">
				<!-- 商品名称 -->
				<view class="goods-info-title-left unify-weight">
					{{objectification && objectification.goods_name}}
				</view>

				<!-- 收藏操作 -->
				<uni-goods-collect></uni-goods-collect>

			</view>

			<view class="goods-info-price unify-flex">
				<view class="goods-info-price-left unify-weight" :class="'tf-' + themeColor.name">
					<text class="goods-price-iden">{{moneySymbol}}</text>
					{{objectification.goods_price}}
				</view>
				
				<uni-goods-add-subtract :data="objectification" @minus="tapNumber" @add="tapNumber"></uni-goods-add-subtract>
			</view>
		</view>

		<!-- 商品评价 -->
		<view class="goods-appraise unify-background-color unify-padding">
			<!-- 标题 -->
			<view class="goods-appraise-title unify-flex">
				<view class="goods-appraise-title-left unify-weight unify-flex">
					外卖评价
					<view class="goods-appraise-title-assist">(好评度98%)</view>
				</view>
				<view class="goods-appraise-title-right unify-flex" @tap="$openPage('goodsAppraiseList')">
					99条评论
					<view class="iconfont el-icon-icon12 unify-rotate90"></view>
				</view>
			</view>

			<!-- 评价导航 -->
			<view class="appraise-nav unify-flex">
				<view class="appraise-nav-item unify-flex" v-for="(item,index) in appraiseNavMenu" :key="index"
					v-if="index > 1">
					<view class="iconfont el-icon-zantianchong"
						:class="[index === (appraiseNavMenu.length - 1)? 'unify-flip-vertical': '']" v-if="index > 2">
					</view>
					{{item.name}}
					<view style="margin-left: 5rpx;">{{item.value}}</view>
				</view>
			</view>

			<!-- 评价列表 -->
			<uni-goods-appraise :num="2"></uni-goods-appraise>
			
			<!-- 评价总数 -->
			<view class="appraise-total-num unify-relative" @tap="$openPage('goodsAppraiseList')">
				<view class="appraise-total-num-nk unify-absolute">
					<view class="appraise-total-num-con unify-flex">
						<image class="appraise-total-num-avatar" :src="errorImage" mode="" v-for="(item,index) in list" :key="index" v-if="index < 2"></image>
						<image class="appraise-total-num-avatar" :src="iconMore" mode="" v-if="list.length > 2"></image>
						<view class="appraise-total-num-in"></view>
						66条外卖评价
						<view class="iconfont el-icon-icon12 unify-rotate90"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="goods-details unify-background-color">
			<uni-html content="<p>我的测试详情</p>"></uni-html>
		</view>
		
		<!-- 间隔 -->
		<view class="unify-background-color">
			<uni-interval :height="show? '70px': '20px'"></uni-interval>
		</view>

		<uni-goods-add-subtract-animation :show="isCartIcon" :cartItemElc="cartItemElc"></uni-goods-add-subtract-animation>

		<!-- 购物车 -->
		<uni-shopping-trolley ref="uniShoppingTrolley" :show="show" :cartItemElc="cartItemElc" :isCartIcon="isCartIcon"
			:num="goodsNum" :totalPrice="totalPrice" :isMinus="isMinus" @updateIsCartIcon="updateIsCartIcon"
			@updateCartItemElc="updateCartItemElc">
		</uni-shopping-trolley>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appraiseNavMenu: this.$mConstDataConfig.appraiseNavMenu, // 评价导航菜单
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				errorImage: this.$mAssetsPath.errorImage,
				iconMore: this.$mAssetsPath.iconMore,
				objectification: undefined, // 接收对象
				show: false, // 购物车是否显示
				isCartIcon: false, // 动画标
				cartItemElc: { // 坐标
					left: 0,
					top: 0
				},
				list: [{}, {}, {}],
				goodsNum: 0, // 购物车数量
				totalPrice: 0, // 商品总价
				isMinus: 0, // 判断是否减操作
				scrollTop: 0,	// 监听滚动
			}
		},
		onLoad(options) {
			let query;
			// #ifdef MP
			query = this.$parseURL(options.query)
			// #endif
			// #ifdef APP-PLUS || H5
			query = this.$mUtils.jsonParse(options.query, 1)
			// #endif
			this.objectification = query.data;
		},
		methods: {
			// 返回上一步
			tapBack() {
				this.$mUtils.overBack()
			},
			
			// 点击商品数量加减 1减  2加
			tapNumber(e, type, index, index2) {
				let objectification = this.objectification;
				this.isMinus = type; // 判断是否减操作  1减  2加
				switch (type) {
					case 1:
						objectification.goods_number--
						this.goodsNum--
						if (this.goodsNum === 0) {
							this.show = false;
							setTimeout(() => {
								this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
							}, 20)
						}
						break
					case 2:
						this.show = true;
						objectification.goods_number++
						this.cartItemElc.left = e.touches[0].pageX - 15; // 自由调动位置
						this.cartItemElc.top = e.touches[0].pageY - 40;
						setTimeout(() => {
							this.goodsNum++
							this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
						}, 20)
						break
					default:
						break
				}
				this.objectification = objectification;
			},

			// 更新动画标状态  默认false
			updateIsCartIcon(e) {
				this.isCartIcon = e;
			},

			// 更新cartItemElc坐标移动
			updateCartItemElc(e) {
				this.cartItemElc = e;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	$avatar: 36rpx;

	// 自定义顶部导航
	.uni-nav-bar {
		
		.left-back {
			background: rgba($color: #FFFFFF, $alpha: .5);
			border: 1rpx solid rgba($color: #000000, $alpha: .05);
			width: 30px;
			height: 30px;
			align-items: center;
			border-radius: 50%;
			justify-content: center;
			
			.el-icon-icon12 {
				font-size: 22px;
				margin-right: 2px;
			}
		}
	}
	
	// 商品信息
	.goods-info {

		.goods-info-title {
			justify-content: space-between;
			padding-top: 30rpx;

			.goods-info-title-left {
				width: 88%;
				padding: 5rpx 0 0;
				font-size: $uni-font-size-lg;
				line-height: 45rpx;
			}
		}

		.goods-info-price {
			height: 96rpx;
			align-items: center;
			justify-content: space-between;

			.goods-info-price-left {
				font-size: $uni-font-size-big;
				font-family: $font-family-t;

				.goods-price-iden {
					font-size: $uni-font-size-base;
				}
			}

			
		}
	}

	// 商品评价
	.goods-appraise {
		margin-top: $uni-spacing-col-basic;

		// 标题
		.goods-appraise-title {
			height: 96rpx;
			align-items: center;
			padding-top: 10rpx;
			justify-content: space-between;

			.goods-appraise-title-left {
				font-size: $uni-font-size-lg;
				align-items: center;

				.goods-appraise-title-assist {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					font-weight: 400;
					margin-left: 10rpx;
				}
			}

			.goods-appraise-title-right {
				align-items: center;
				font-size: $uni-font-size-sm;

				.iconfont {
					font-size: $uni-font-size-sm;
					margin-left: 5rpx;
				}
			}
		}

		// 评价导航
		.appraise-nav {
			font-size: $uni-font-size-sm;
			padding-bottom: 10rpx;

			.appraise-nav-item {
				padding: 6rpx 10rpx;
				background-color: rgba($color: $uni-auxiliary-colour1, $alpha: .2);
				margin-right: 20rpx;
				border-radius: 5rpx;
				align-items: center;

				.iconfont {
					font-size: $uni-font-size-sm;
					color: $uni-auxiliary-colour1;
				}
			}
		}
		
		// 评价总数
		.appraise-total-num {
			height: 96rpx;
			
			.appraise-total-num-nk {
				width: 100%;
				height: 66rpx;
				background-color: rgba($color: #000000, $alpha: .05);
				top: 0;
				bottom: 0;
				margin: auto;
				border-radius: 10rpx;
				
				.appraise-total-num-con {
					height: inherit;
					align-items: center;
					justify-content: center;
					font-size: $uni-font-size-sm;
					
					.appraise-total-num-avatar:first-child {
						margin-left: 0;
					}
					
					.appraise-total-num-avatar {
						width: $avatar;
						height: $avatar;
						border-radius: 50%;
						margin-left: -10rpx;
						background-color: $uni-bg-color;
					}
					
					.el-icon-icon12 {
						font-size: $uni-font-size-sm;
						margin-top: 5rpx;
					}
					
					.appraise-total-num-in {
						width: 10rpx;
					}
				}
			}
		}
	}
	
	// 商品详情
	.goods-details {
		margin-top: $uni-spacing-col-basic;
	}
</style>
